<!--
 * @FileDescription 视角
 * @Author lz
 * @Date 20230530 11:45:10
 * @LastEditors lz
 * @LastEditTime 20230530 11:45:10
-->
<template>
    <div class="viewBox">
        <div class="BlackSpot" v-for="(item, index) in HomeContent.Default.ViewData.value" @click="SwitchView(item.Id)">
            <a-button>{{ item.Name }}</a-button>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ClientMessage } from '@runtime/generate/message/ClientMessage';
import WebSocketComponent from '@runtime/module/WebSocket/WebSocketComponent';
import { reactive, ref, toRefs, onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onUnmounted, StyleValue} from 'vue'
import HomeContent from '../HomeContent';
import MessageCode from '../MessageCode';
import OrbitCameraComponent from '../OrbitCameraComponent';
const state = reactive({

});
async function SwitchView(Id: any) {
    let newArr: any = await WebSocketComponent.Default.PostMessageAsync(new ClientMessage.DiagnosisAdapterRequest(MessageCode.Default.MsgCodesList.VIEW_DATA_CONFIG, `${Id}`))
    console.log(JSON.parse(newArr.Content).Result);
    let ValData = JSON.parse(newArr.Content).Result
    await OrbitCameraComponent.Default.UpdateV2Async(ValData.TargetContainer, ValData.Horizontal, ValData.Vertical, ValData.Distance, ValData.MinDistance, ValData.MaxDistance, ValData.VerticalAngleMax, ValData.VerticalAngleMin, 1, 1, 1,ValData.HorizontalAngleMax,ValData.HorizontalAngleMin);

}
onMounted(async () => {

})


</script>

<style scoped>
.viewBox {
    position: absolute;
    right: 0;
    bottom: 106px;
    height: 480px;
    background-color:#fff;
    border-radius: 16px;
    text-align: center;
    padding-top: 20px;
    box-shadow:0 0 20px #666;
}

.BlackSpot {
    color: #fff;
    margin-bottom: 8px;
}
:deep().ant-btn{
    border: none;
}
</style>